<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新增限时购</title>
  <!-- <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script> -->
  <script src="../../lib/jquery/jquery-3.6.0.js"></script>
  <!-- <script src="../../javaScript/index.js"></script> -->
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <!-- <link rel="stylesheet" href="../../javaScript/shangpinguanli/shangpinliebiao.js"> -->
  <link rel="stylesheet" href="../../font/iconfont.css">
  <!-- <link rel="stylesheet" href="../../css/shangpinguanli/xinzengshangpin.css"> -->
  <link rel="stylesheet" href="../../css/cuxiaoguanli/xianshigou.css">
  <script src="../../javaScript/cuxiaoguanli/shuju.js"></script>

  <style>
    .input_text{
      height: 160px;
      line-height: 20px;
      width: 40%;
    }
    .tijiao,
    .quxiao {
      width: 125px;
      height: 45px;
      line-height: 36px;
      padding: 0;
      border: 0;
      border-radius: 2px;
    }
    
    .tijiao {
      /* 提交按钮 */
      background-color: #49A2E8;
      color: white;
    }
    
    .quxiao {
      /* 重置按钮 */
      color: #666666;
      background-color: white;
      border: black 1px solid;
    }

    .icon-anniu_kaiqi {
        font-size: 40px;
        color: #49A2E8;
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 15px;
        /* display: none; */
    }

    .icon-anniu_guanbi {
        font-size: 40px;
        /* color: #49A2E8; */
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 15px;
        display: none;
    }
    .kaiguan{
        height: 46px;
        margin-left: 86px;
    }
    .row{
        margin: 20px 0 0 50px;
        height: 46px;
        line-height: 46px;
        width: 1026px;
    }
    .biaoge{
        height: 200px;
    }
    .input_title{
        padding: 0px 0px 0px 16px;
    }
    .taBg{
        background-color: whitesmoke;
        padding: 20px 20px;
    }
    table{
        background-color: white;
    }
    .row .col-md-4 p{
        font-size: 15px;
        color: #999;
    }
    table .icon-anniu_kaiqi,
    table .icon-anniu_guanbi{
        position: absolute;
        top: -9px;
        left: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
      <div>新增限时购</div>
      <div>

        <!-- 活动名称 -->
        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>活动名称</span>
          <input type="text" class="form-control" aria-describedby="sizing-addon2" placeholder="2-10个字" style="width: 50%;" id="huodongName">
        </div>
      

        <!-- 移动端广告图 -->
        <div class="input-group input-group-lg fenlei">
          <span class="input-group-addon zhutu" > <span class="xing">*</span>移动端广告</span>
  
          <div class="input_img_father_div">
            <input class="upload_input" id="yidongImg" type="file" accept="image/*" />
            <!-- 自定义按钮效果 -->
            <div class="input_img_btn_div">
              <span class="input_img_btn_span">+
                <p>(1/5)</p>
              </span>
  
            </div>
          </div>
  
          <p> 支持png、jpg、jpeg格式，大小请小于2M，尺寸大于等于600*600px</p>
        </div>

        <!-- PC端广告图 -->
        <div class="input-group input-group-lg fenlei">
          <span class="input-group-addon zhutu" > <span class="xing">*</span>PC端广告</span>
  
          <div class="input_img_father_div">
            <input class="upload_input" id="pcImg" type="file" accept="image/*" />
            <!-- 自定义按钮效果 -->
            <div class="input_img_btn_div">
              <span class="input_img_btn_span">+
                <p>(1/5)</p>
              </span>
  
            </div>
          </div>
  
          <p> 支持png、jpg、jpeg格式，大小请小于2M，尺寸大于等于600*600px</p>
        </div>

        <!-- 上下架设置 -->
        <div class="row" style="position: relative;">
            <!-- <div class="col-md-1 col-xs-1"></div> -->
            <div class="col-md-1 col-xs-1" style="position: absolute;padding-left: 0;padding-right: 0px;">
                <span> <span class="xing">*</span>上下架设置</span>
            </div>
            <div class="col-md-1 col-xs-4 kaiguan" style="position: relative;">
                <span class="iconfont icon-anniu_kaiqi" id="qiyong"></span>
                <span class="iconfont icon-anniu_guanbi" id="jinyong"></span>
            </div>
            <div class="col-md-4 col-xs-4">
                <p> 开启上下架设置时，上下架时间才会生效</p>
            </div>
        </div>
        <!-- <div class="input-group input-group-lg">
          <span class="input-group-addon tuijian" > <span class="xing">*</span>上下架设置</span>
          <span class="iconfont icon-anniu_kaiqi"></span>
          <span class="iconfont icon-anniu_guanbi"></span>
        </div> -->

        <!-- 上架时间 -->
        <div class="input-group input-group-lg">
          <span class="input-group-addon tuijian" > <span class="xing">*</span>上架时间</span>
          <input type="date" class="form-control" aria-describedby="sizing-addon2" placeholder="选择日期时间" style="width: 35%;" id="sjTime">
        </div>

        <!-- 下架时间 -->
        <div class="input-group input-group-lg">
          <span class="input-group-addon tuijian" > <span class="xing">*</span>下架时间</span>
          <input type="date" class="form-control" aria-describedby="sizing-addon2" placeholder="选择日期时间" style="width: 35%;" id="xjTime">
        </div>

        <!-- 活动规则 -->
        <div class="input-group input-group-lg">
          <span class="input-group-addon tuijian" > <span class="xing"> </span>活动规则</span>
          <textarea type="text" class="form-control input_text1" aria-describedby="sizing-addon2" placeholder="" maxlength="200" style="height: 160px;line-height: 20px;width: 100%;" id="guize"></textarea>
        </div>

        <!-- 表格 -->
        <div class="row biaoge" style="margin-top:20px;font-size: 16px;">
            <!-- <div class="col-md-1 col-xs-1 input_title"></div> -->
            <div class="col-md-1 col-xs-1 input_title ">时间列表</div>
            <div class="col-md-11 col-xs-11 ">
                <div class="taBg">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr class="table_row">
                                <th>时间段名称</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>当前状态</th>
                            </tr>
                        </thead>
                        <tbody class="table_row table_content">
                            <tr>
                                <td>10:00</td>
                                <td>10:00:00</td>
                                <td>11:59:59</td>
                                <td style="position: relative;">
                                    <span class="iconfont icon-anniu_kaiqi" id="kai1"></span>
                                    <span class="iconfont icon-anniu_guanbi"></span>
                                </td>
                            </tr>
    
                            <tr>
                                <td>14:00</td>
                                <td>14:00:00</td>
                                <td>15:59:59</td>
                                <td style="position: relative;">
                                    <span class="iconfont icon-anniu_kaiqi" id="kai2"></span>
                                    <span class="iconfont icon-anniu_guanbi"></span>
                                </td>
                            </tr>
    
                            <tr>
                                <td>18:00</td>
                                <td>18:00:00</td>
                                <td>19:59:59</td>
                                <td style="position: relative;">
                                    <span class="iconfont icon-anniu_kaiqi" id="kai3"></span>
                                    <span class="iconfont icon-anniu_guanbi"></span>
                                </td>
                            </tr>
    
                            <tr>
                                <td>22:00</td>
                                <td>22:00:00</td>
                                <td>23:59:59</td>
                                <td style="position: relative;">
                                    <span class="iconfont icon-anniu_kaiqi" id="kai4"></span>
                                    <span class="iconfont icon-anniu_guanbi"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="row" style="margin-top: 20px;">
          <div class="col-md-1 col-xs-1">
          </div>
          <div class="col-md-4 col-xs-4 content_right">
              <button class="tijiao">提交</button>
              <button class="quxiao">取消</button>
          </div>
        </div>
      
      </div>
    </div>
  </div>






  <script>
    // layui.use(['form', 'layedit', 'laydate'], function () {
    //   var form = layui.form
    //     , layer = layui.layer
    //     , layedit = layui.layedit
    //     , laydate = layui.laydate;

    //   form.on('switch(switchTest)', function (data) {
    //     layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
    //       offset: '6px'
    //     });
    //     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
    //   });
    // })


    $(".upload_input").change(function () {
      var objUrl = getObjectURL(this.files[0]);//获取文件信息
      // console.log(objUrl)
      if (objUrl) {
        $('span.input_img_btn_span').hide();
        $('img.upload').show();
        $("img.upload").attr("src", objUrl);
      }
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
    }


    
    $('.icon-anniu_kaiqi').click(function () {
        $(this).css({ display: 'none' })
        console.log($(this).css("display"))
        $(this).siblings().css({ display: 'block' })
    })

    $('.icon-anniu_guanbi').click(function () {
        $(this).css({ display: 'none' })
        // console.log($('this'))
        $(this).siblings().css({ display: 'block' })
    })


    // num: "010",//序号
    // huodongName: "打地鼠0",//活动名称
    // shangjiaTime:"2021-12-24",//上架时间
    // xiajiaTime: "2021-12-25",//下架时间
    // shangpinNum:"100",//商品数量
    // zhuangtai:"启用"//状态
    // yidongImg:'',//移动端广告
    // pcImg:'',//pc端广告
    // guize:'',//规则
    // time1:'',//有效时间1
    // time2:'',//有效时间2
    // time3:'',//有效时间3
    // time4:'',//有效时间4

    //提交
    $('.tijiao').on('click',function () {
      let huodongval = $('#huodongName').val()
      let yidonggval = $('#yidongImg').val()
      let pcval = $('#pcImg').val()
      let sjval = $('#sjTime').val()
      let xjval = $('#xjTime').val()
      let guizeval = $('#guize').val()
      let bval = "禁用"
      let kai1val = ''
      let kai2val = ''
      let kai3val = ''
      let kai4val = ''
      if($('#qiyong').css("display") != "none"){
        bval="启用"
      }
      if($('#qiyong').css("display") != "none"){
        kai1val="10:00"
      }
      if($('#qiyong').css("display") != "none"){
        kai2val="14:00"
      }
      if($('#qiyong').css("display") != "none"){
        kai3val="18:00"
      }
      if($('#qiyong').css("display") != "none"){
        kai4val="22:00"
      }
      
      let arr = []
      let a = huodongData.length
      arr.push(
        {num:"00"+a,//序号
        huodongName:huodongval,//活动名称
        shangjiaTime:sjval,//上架时间
        xiajiaTime:xjval,//下架时间
        shangpinNum:'',//商品数量
        zhuangtai:bval,//状态
        yidongImg:yidonggval,//移动端广告
        pcImg:pcval,//pc端广告
        guize:guizeval,//规则
        time1:kai1val,//有效时间1
        time2:kai2val,//有效时间2
        time3:kai3val,//有效时间3
        time4:kai4val,//有效时间4
      })
      // console.log(arr)
      if(huodongval != ''){
        huodongData = huodongData.concat(arr)
        arr = []
        let b =huodongData.length
        console.log(huodongData.length)
        console.log(huodongData)
        location.href = './cuxiaoguanli.html'
        // window.open("./cuxiaoguanli.html")
        // window.location.href = "./cuxiaoguanli.html"
      }else if(huodongval == ''){
        confirm('限时购活动名不能为空！')
      }
      // location.href = './cuxiaoguanli.html'
    })


    //取消
    $('.quxiao').on('click',function () {
      location.href = './cuxiaoguanli.html'
    })
  </script>
</body>

</html>